<template>
  <div class="supervisor">
    <app-header :back="false" titleContent="监理"></app-header>
    <div class="tab-fixed">
      <tab :line-width="2" v-model="index" :animate="false" active-color="#0078de">
        <tab-item :class="{'border-rihgt': index===0 || index===1}" :selected="tag === item" :key="item" v-for="(item, index) in taglist" @on-item-click="handler(index)">{{item}}</tab-item>
      </tab>
    </div>
    <!-- <swiper v-model="index" aspect-ratio :show-dots="false">
      <swiper-item v-for="(item, index) in taglist" :key="index">
        <div class="tab-swiper vux-center">{{item}} Container</div>
      </swiper-item>
    </swiper> -->
    <div v-if="index === 0">
      <tuan-dui></tuan-dui>
    </div>
    <div v-if="index === 1">
      <wei-hu></wei-hu>
    </div>
    <div v-if="index === 2">
      <cha-yan></cha-yan>
    </div>
  </div>
</template>

<script>
import AppHeader from '../header/header'
import tuanDui from './tuandui'
import weiHu from './weihu'
import chaYan from './chayan'
import {Tab, TabItem} from 'vux'
const list = () => ['团队列表', '维护公开', '评估查验']
export default {
  data () {
    return {
      tag: '团队列表',
      taglist: list(),
      index: 0
    }
  },
  components: {
    AppHeader,
    Tab,
    TabItem,
    tuanDui,
    weiHu,
    chaYan
  },
  created () {
  },
  methods: {
    handler (index) {
      this.index = index
    }
  }
}
</script>

<style lang="scss">
.supervisor{
  .tab-fixed{
    width: 100%;
    position: fixed;
    top: 46px;
    left: 0;
    z-index: 2;
    border-bottom: 1px solid #f2f2f2;
  }
  .vux-tab .vux-tab-item.vux-tab-selected{
    font-size: 15px;
  }
  .border-rihgt{
    border-right: 1px solid #f2f2f2 !important;
  }
}
</style>
